// import data from "./data";
import styles from "../../assets/css/Index/Index.module.css";
import { BellFilled } from "@ant-design/icons";
import {
  getBulletin,
  getScheduling,
  getCircumstance,
} from "../../api/Index/Index";
import { useEffect, useState } from "react";

export default function index() {
  const [bulletin, setBulletin] = useState([]);
  const [circumstance, setCircumstance] = useState([]);
  const [scheduling, setScheduling] = useState([]);
  useEffect(() => {
    getCircumstance()
      .then((res) => {
        console.log(res);
        if (res.code === 1) {
          console.log(res.data);
          
          setCircumstance(res.data);
        }
      })
      .catch((err) => {
        console.log(err);
      });
    getBulletin()
      .then((res) => {
        console.log(res);
        if (res.code === 1) {
          setBulletin(res.data);
        }
      })
      .catch((err) => {
        console.log(err);
      });
    getScheduling()
      .then((res) => {
        console.log(res);
        if (res.code === 1) {
          setScheduling(res.data);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);
  const Module = (props) => {
    const items = scheduling.map((item) => {
      if (item.purview === props.msg) {
        return (
          <div key={item.id} className={styles.div}>
            <div className={styles.divLine}>
              <div>
                <img src={item.head} className={styles.divImg} alt="" />
              </div>
              <div>
                <p>{item.name}</p>
                <p>工号：DR-{item.id}</p>
              </div>
            </div>
            <div className={styles.divButton}>{item.purview}-今日当班</div>
          </div>
        );
      }
      // 如果item.purview不等于props.msg，可以选择返回null或者不返回任何内容
      return null;
    });

    return <div className={styles.module}>{items}</div>;
  };
  const Div = () => {
    const items = circumstance.map((item, index) => {
      if (index < circumstance.length - 1) {
        return (
          <div key={item.id} className={styles.headDiv}>
            <b>{item.waitnum}</b>
            <a>{item.name}</a>
          </div>
        );
      }
    });
    const item = circumstance.map((item, index) => {
      if (index === circumstance.length - 1) {
        return (
          <div className={styles.bottomDiv}>
            <b>{item.waitnum}</b>
            <a>{item.name}</a>
          </div>
        );
      }
    });
    return (
      <>
        <div className={styles.nowHead}>{items}</div>
        <div className={styles.nowBottom}>{item}</div>
      </>
    );
  };
  return (
    <div className={styles.bigBox}>
      <div className={styles.left}>
        <div className={styles.doctor} style={{ display: "flex" }}>
          <Module msg="医生"></Module>
        </div>
        <div className={styles.nurse} style={{ display: "flex" }}>
          <Module msg="护士"></Module>
        </div>
        <div className={styles.dispensary} style={{ display: "flex" }}>
          <Module msg="药房"></Module>
        </div>
      </div>
      <div className={styles.right}>
        <div className={styles.nowDepartment}>
          <p className={styles.title}>当前科室排队情况</p>
          <div className={styles.department}>
            <Div />
          </div>
        </div>
        <div className={styles.nowDirector}>
          <p className={styles.title}>当前主任</p>
          <div className={styles.director}>
            {circumstance.map((item) => {
              return (
                <div className={styles.directorDiv}>
                  <b>{item.maindoctor}</b>
                  <a>DR-001</a>
                </div>
              );
            })}
          </div>
        </div>
        <div className={styles.announcement}>
          <p className={styles.title}>医院的公告</p>
          <div className={styles.announcement_row}>
            <div className={styles.announcementRow}>
              {bulletin.map((item) => {
                return (
                  <div className={styles.row}>
                    <div>
                      <BellFilled style={{ color: "#3dc1dc" }} /> {item.title}
                    </div>
                    <a>{item.date}</a>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
